<template>
	<view class="all">
		<view class="contents" v-show="Inv == 0">
			<view class="content">
				<view class="left-aside">
					<view v-for="(item, index) in list" :key="item.id" class="f-item b-b" :class="{ active: index === currentIndex }" bindscrolltolower='butop' @click="tabtap(index)">{{ item.name }}</view>
				</view>
				<view class="right">
					<view v-for="(item, index) in slist" :key="index" class="s-list" :id="'main-' + item.id">
						<!-- <text class="s-item"></text> -->
						<view class="t-list" @click="navToList(item)">
							<image class="t_img" :src="item.image[0]"></image> 
							<view class="t_right">
								<view class="t_title">{{ item.title }}</view>
								<view class="t_bot">
									<view class="price">
										￥
										<text class="bigs">{{ item.skus[0].jin_price }}</text>
									</view>
									<view class="uni-numbox">
										<view  class="uni-numbox__minus"  @click.stop="numberChange('minus', item.count, index)">-</view>
										<input :value="item.count" class="uni-numbox__value" type="number" @blur.stop="numberChange('blu', item.count, index)">
										<view  class="uni-numbox__plus" @click.stop="numberChange('plus', item.count, index)">+</view>
									</view>
									<!-- <uni-number-box class="step" :value.sync="item.count" :index="index" @eventchange="numberChange"></uni-number-box> -->
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType" class="zhuangtai"></uni-load-more>
				</view>
			</view>
			<view class="bgs"></view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="total-box">
					<span class="pice_h">共计:</span>
					<text class="price_s">
						<text class="num_s" v-text="jinnum">{{ jinnum }}</text>
						件商品
					</text>
				</view>
				<view class="total-box">
					<span class="pice_h">合计:</span>
					<text class="price" v-text="total">¥{{ total }}</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">下单</button>
			</view>
		</view>
		<view class="contents" v-show="Inv == 1">
			<view class="content_s">
				<view class="empty" v-if="orderList.length == 0"> 
					<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
					<view class="twen">空空如也</view>
				</view>
				<view class="j_list" v-else v-for="(item, index) in orderList" :key='index'>
					<view class="j_time">{{item.create_time_text}}</view>
					<view class="j_lists">
						<view class="j_lista" @click="detils(item)" v-for="(items, indexs) in item.products" :key='indexs'>
							<image class="t_img" :src="items.images[0]"></image>
							<view class="j_right">
								<view class="t_title">{{items.title}}</view>
								<view class="price2">
									<view>
										￥
										<text class="bigs">{{items.price}}</text>
									</view>
									<view></view>
								</view>
							</view>
						</view>
						<view class="j_lista_bot">
							<text class="grays">共</text>
							{{item.products.length}}
							<text class="grays">件商品 实付款</text>
							￥
							<text class="bigs2">{{item.order_price}}</text>
						</view>
					</view>
					<view class="j_btns" @click="detils(item)"><image class="j_img" src="../../../static/xq.png"></image></view>
				</view>
				
			</view>
		</view>
		<view class="footer">
			<view class="inv-h-w">
				<view :class="['inv-h', Inv == 0 ? 'inv-h-se' : '']" @click="Inv = 0">
					<image v-show="Inv == 0" class="tab_img" src="../../../static/tab1b.png"></image>
					<image v-show="Inv == 1" class="tab_img" src="../../../static/tab1a.png"></image>
					<view>商品</view>
				</view>
				<view :class="['inv-h', Inv == 1 ? 'inv-h-se' : '']" @click="Inv = 1">
					<image v-show="Inv == 1" class="tab_img" src="../../../static/tab2b.png"></image>
					<image v-show="Inv == 0" class="tab_img" src="../../../static/tab2a.png"></image>
					<view>订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-boxs.vue';
export default {
	components: {
		uniNumberBox,
		uniLoadMore
	},
	data() {
		return {
			Inv: 0,
			sizeCalcState: false,
			tabScrollTop: 0,
			currentIndex: 0,
			loadingType: 'more', //加载更多状态
			loadingTypes: 'more', //订单加载更多状态
			list: [], //分类
			slist: [], //分类商品
			orderList:[], //订单列表
			cat_id: '', //当前商品分类id
			products_jin: [], //选择的商品
			page: 1,
			pages: 1, //订单列表页面
			limit: 8,
			total: '',//总价
			jinnum: 0 //总数量
		};
	},
	computed: {
		...mapState({
			user: state => state.user.userinfo,
			cartList: state => state.cart.products_jin
		}),
		hasLogin() {
			return this.user.id ? true : false;
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.loadData();
		if(uni.getStorageSync('cid')){
			this.getSlist('refresh');
			uni.removeStorageSync('cid')
		}
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//加载更多
	onReachBottom() {
		if(this.Inv == 0){
			this.page = this.page-1+2;
			this.getSlist();
		}else{
			this.pages = this.pages-1+2;
			this.getorderList();
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		if(this.Inv == 0){
			this.page = 1;
			this.getSlist('refresh');
		}else{
			this.pages = 1;
			this.getorderList('refresh');
		}
	},
	watch: {
		 Inv(){
			 if(this.Inv == 1){
				 this.orderList = [];
				 this.pages = 1; 
				 this.getorderList();
			 }
		}
	},
	methods: {
		...mapMutations(['SAVE_JINCART_PRODUCT_QUANTITY']),
		...mapActions(['cartAddjinProduct', 'cartUpdateStatus']),
		navToLogin() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		butop(){
	
		},
		//数字输入器
		numberChange(ti , count, index) {
			// minus  plus blu
			if(ti == 'minus'){
				if(count == 0){
					return false;
				}
				count--;
			}else if(ti == 'plus'){
				count++;
			}
			let item = this.slist[index];
			let form = {
				product_id: item.id,
				sku_id: item.skus[0].id,
				quantity: count
			}
			this.cartAddjinProduct(form).then(res => {
				if(res.code == 1){
					this.getSlist('refresh');
				}
			}).catch(e => {
			
			})
		},
		async loadData(cb) {
			this.$http.post('jincategory').then(res => {
				this.list = res.data;
				if (this.list.length) {
					this.currentIndex = 1;
					this.cat_id = this.list[1].id;
					this.getSlist();
				}
				cb && cb();
			});
		},
		//加载商品 ，带下拉刷新和上滑加载 没有更多直接返回
		async getSlist(type = 'add', loading) {
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}
	
			let form = {
				cat_id: this.cat_id || 0,
				page: this.page,
				limit: this.limit
			};
			let res = await this.$http.post('jingoodlist', form);
			let goodsList = res.data.product;
			if (type === 'refresh') {
				this.slist = [];
			}
			this.slist = [...this.slist, ...goodsList];
			this.total = res.data.total; //总价
			this.jinnum = res.data.num; //总量
			//选中的商品
			this.slist.forEach((item, index) => {
				if(item.count > 0){
					this.products_jin.push(item.id)
				}
			})
			//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			this.loadingType = res.data.product.length != 8? 'nomore' : 'more';
			// this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
			if (type === 'refresh') {
				if (loading == 1) {
					uni.hideLoading(); //结束加载
				} else {
					uni.stopPullDownRefresh(); //结束下啦刷新
				}
			}
		},
		//加载订单列表 ，带下拉刷新和上滑加载 没有更多直接返回
		async getorderList(type = 'add', loading) {
			if (type === 'add') {
				if (this.loadingTypes === 'nomore') {
					return;
				}
				this.loadingTypes = 'loading';
			} else {
				this.loadingTypes = 'more';
			}
			let form = {
				state: 1,
				page: this.pages
			};
			let res = await this.$http.post('jinorder.list', form);
			let goodsList = res.data.data;
			if (type === 'refresh') {
				this.orderList = [];
			}
			this.orderList = [...this.orderList, ...goodsList];
			//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			if (res.data.current_page == res.data.last_page) this.loadingType = 'nomore'
			else this.loadingType = 'more'
			if (type === 'refresh') {
				if (loading == 1) {
					uni.hideLoading(); //结束加载
				} else {
					uni.stopPullDownRefresh(); //结束下啦刷新
				}
			}
		},
		//创建订单
		createOrder() {
			if(this.products_jin.length > 0){
				let form = {
					ids: this.products_jin
				};
				uni.navigateTo({
					url: '/pages/order/createOrderjin'
				});
			}else{
				this.$api.msg("没有选择商品");
			}
			// this.cartUpdateStatus(form).then(res => {
				
			// });
		},
		//一级分类点击
		tabtap(index) {
			this.currentIndex = index;
			this.cat_id = this.list[index].id;
			uni.showLoading({
				title: '正在加载'
			});
			this.page = 1;
			this.getSlist('refresh', 1);
		},
		//右侧栏滚动
		asideScroll(e) {
			if (!this.sizeCalcState) {
				this.calcSize();
			}
			let scrollTop = e.detail.scrollTop;
			let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
			if (tabs.length > 0) {
				this.currentId = tabs[0].pid;
			}
		},
		//计算右侧栏每个tab的高度等信息
		calcSize() {
			let h = 0;
			this.slist.forEach(item => {
				let view = uni.createSelectorQuery().select('#main-' + item.id);
				view.fields(
					{
						size: true
					},
					data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}
				).exec();
			});
			this.sizeCalcState = true;
		},
		//商品详情
		navToList(item) {
			uni.setStorageSync('cid', this.cat_id);
			uni.navigateTo({
				url: '/pages/product/product?id='+item.id +'&ty=1'
			});
		},
		//订单详情
		detils(item) {
			uni.navigateTo({
				url: `/pages/user/replenish/details?order_sn=${item.order_sn}`
			});
		}
	}
};
</script>

<style lang="scss">
	$numbox-btn-width:50upx;
	$numbox-input-width:60upx;
	$numbox-height:50upx;
	$uni-font-size-xxl:20upx;
	
	.empty {
		position: fixed;
		left: 0;
		top: 20%;
		width: 100%;
		// height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}
		.twen{
			color: $font-color-disabled;
		}
	}
	.uni-numbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		height: $numbox-height;
		position: relative;
	
		&:after {
			content: '';
			position: absolute;
			transform-origin: center;
			box-sizing: border-box;
			pointer-events: none;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			border: 1px solid $uni-border-color;
			border-radius: $uni-border-radius-lg;
			transform: scale(.5);
		}
	
		&__minus,
		&__plus {
			margin: 0;
			background-color: $uni-bg-color-grey;
			width: $numbox-btn-width;
			font-size: $uni-font-size-xxl;
			height: 100%;
			line-height: $numbox-height;
			text-align: center;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: $uni-text-color;
			position: relative;
		}
	
		&__value {
			position: relative;
			background-color: $uni-bg-color;
			width: $numbox-input-width;
			height: 100%;
			text-align: center;
			padding: 0;
	
			&:after {
				content: '';
				position: absolute;
				transform-origin: center;
				box-sizing: border-box;
				pointer-events: none;
				top: -50%;
				left: -50%;
				right: -50%;
				bottom: -50%;
				border-style: solid;
				border-color: $uni-border-color;
				border-left-width: 1px;
				border-right-width: 1px;
				border-top-width: 0;
				border-bottom-width: 0;
				transform: scale(.5);
			}
		}
	
		&--disabled {
			color: $uni-text-color-disable;
		}
	}
	
	
.footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	box-shadow: 0 0 3upx 3upx #e3e3e3;
	padding: 10upx 0;
	z-index: 90;
}
.tab_img {
	width: 50upx;
	height: 50upx;
}
.inv-h-w {
	background-color: #ffffff;
	height: 100upx;
	display: flex;
}
.inv-h {
	font-size: 30upx;
	flex: 1;
	text-align: center;
	color: #555555;
}
.inv-h-se {
	color: #ff4937;
}
/* 底部栏 */
.action-section {
	/* #ifdef H5 */
	margin-bottom: 100upx;
	/* #endif */
	position: fixed;
	left: 30upx;
	bottom: 12vh;
	z-index: 95;
	display: flex;
	align-items: center;
	width: 690upx;
	height: 100upx;
	padding: 0 30upx;
	opacity: 0.9;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 16upx;
	.total-box {
		flex: 1;

		justify-content: flex-end;
		.price {
			font-size: $font-sm;
			color: $base-index-color;
			padding-left: 20upx;
		}
		.price_s {
			font-size: $font-sm;
			padding-left: 15upx;
		}
		.num_s {
			color: $base-index-color;
			padding: 0 15upx 0 8upx;
		}
		.pice_h {
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.confirm-btn {
		padding: 0 38upx;
		margin: 0;
		height: 60upx;
		line-height: 60upx;
		font-size: $font-sm;
		background: $base-index-color;
		border-radius: 5px;
		/* box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72) */
	}
}
page,
.all,
.contents {
	height: 80%;
	color: #333333;
	font-size: 30upx;
}

.content {
	height: 100%;
	display: flex;
}
.content_s {
	min-height: 100%;
	padding-bottom: 160upx;
	// display: flex;
}
.left-aside {
	flex-shrink: 0;
	width: 28vw;
	height: 100%;
	background-color: #f8f8f8;
	position: fixed;
	top: 0;
	margin-right: 200upx;
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100upx;
	font-size: 28upx;
	color: $font-color-base;
	position: relative;
	&.active {
		color: $base-color;
		background: #ffffff;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36upx;
			width: 8upx;
			background-color: $base-color;
			border-radius: 0 4px 4px 0;
			opacity: 0.8;
		}
	}
}

.right{
	flex: 1;
	// overflow: hidden;
	// padding-left: 230upx;
	position: absolute;
	right: 0;
	width: 70vw;
	margin-bottom: 25vh;
	z-index: 1;
}
.s-item {
	display: flex;
	align-items: center;
	height: 70upx;
	padding-top: 8upx;
	font-size: 28upx;
	color: $font-color-dark;
}
.t-list {
	width: 100%;
	padding-top: 12upx;
	display: flex;
	justify-content: flex-start;
	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}
.t_img {
	width: 160upx;
	height: 160upx;
	border-radius: 5upx;
	box-shadow: 0 0 10upx 3upx gray;
	margin: 10upx;
}
.t_right {
	padding-left: 20upx;
	width: 65%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.t_bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.t_title {
	width: 100%;
	font-size: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	// height: 70upx;
}
.price {
	padding: 10upx 0;
	color: #ff4937;
}
.bigs {
	font-size: 35upx;
}
.btns {
	display: flex;
	justify-content: flex-end;
	border: 1upx solid #656565;
	border-radius: 25upx;
	width: 150upx;
	height: 50upx;
	margin-left: 100upx;
}
.btna {
	width: 50upx;
	height: 49upx;
	display: flex;
	justify-content: center;
	line-height: 45upx;
}
.btnb {
	border-left: 1upx solid #656565;
	border-right: 1upx solid #656565;
}
.j_list {
	width: 100%;
}
.j_time {
	padding: 25upx 30upx;
	border-top: 1upx solid #f8f8f8;
}
.j_lists {
	margin: 0 30upx;
	padding: 30upx 0;
	border-top: 1upx solid #f8f8f8;
	border-bottom: 1upx solid #f8f8f8;
}
.j_lista {
	padding: 10upx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.j_right {
	padding-left: 20upx;
	width: 70%;
}
.price2 {
	padding: 20upx 0 !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.j_lista_bot {
	text-align: right;
	padding: 0 30upx;
}
.grays {
	color: #848484;
}
.bigs2 {
	font-size: 38upx;
}
.j_btns {
	padding: 25upx 30upx;
	border-bottom: 15upx solid #f8f8f8;
	text-align: right;
}
.j_img {
	width: 150upx;
	height: 60upx;
}
.bgs{
	position: fixed;
	width: 70vw;
	height: 19vh;
	bottom: 0;
	right: 0;
	background: #FFF;
	z-index: 10;
}
.zhuangtai{
	position: fixed;
	width: 70vw;
	bottom:19vh;
	right: 0;
	background: #FFF;
}
</style>
